<template>
    <div class="statistics">
        <ul>
            <li v-for="item in data" :key="item.title">
                <img :src="item.icon" alt="">
                <div class="left"></div>
                <div class="right">
                    <div class="title">{{ item.title }}</div>
                    <div class="number">{{ format_number(item.value) }}</div>

                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        components: {},
        props: {
            type: {
                type: String,
                default: "sy"
            },
            data: {
                // 返回的数据
                type: Array | Object,
                default: function () {
                    return [
                        { title: '人口统计/人', value: '989000', icon: require('@/assets/images/licang/icon/icon_sq_1@2x.png') },
                        { title: '家庭户数/户', value: '269952', icon: require('@/assets/images/licang/icon/icon_sq_2@2x.png') },
                        { title: '人均居住/㎡', value: '45', icon: require('@/assets/images/licang/icon/icon_sq_3@2x.png') },
                        { title: '人均收入/元', value: '66507', icon: require('@/assets/images/licang/icon/icon_sq_4@2x.png') },
                    ]
                },
            },
        },
        data() {
            return {
                activaName: ''
            }
        },
        created() { },
        mounted() {
        },
        methods: {
            click({ name }) {
                // if (name == '餐饮' || name == '景区') {
                //     this.activaName = name
                //     this.$emit('navClick', name)
                // }
            },
            format_number(n) {
                var b = parseInt(n).toString();
                var len = b.length;
                if (len <= 3) { return b; }
                var r = len % 3;
                // b.slice(r,len).match(/\d{3}/g).join(",") 每三位数加一个逗号。
                return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{3}/g).join(",")
                    : b.slice(r, len).match(/\d{3}/g).join(",");
            }
        },
    };
</script>
<style lang="scss" scoped>
    .statistics {
        /* align-self: flex-start; */
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: center;
        /* background-color: RED; */

        ul {
            display: flex;
            justify-content: space-between;
            width: 75%;

            li {
                /* width: 25%; */
                height: 64px;
                display: flex;

                img {
                    width: 42px;
                    height: 42px;
                    margin-top: 10px;
                    margin-right: 20px;
                }

                .left {
                    border-right: 2px solid #bbb;
                    margin-right: 20px;
                }

                .right {
                    flex: 1;

                    .title {
                        font-size: 20px;
                        color: #FFC344;
                        font-family: PingFang SC-Bold;
                    }

                    .number {
                        font-size: 34px;
                        letter-spacing: 2px;
                        font-family: PingFang SC-Bold;
                        color: #fff;
                    }
                }
            }
        }

    }
</style>